<template>
  <div class="box">
    <div class="content">
      <div style="padding:.1rem .3rem;height: 2rem; display: flex; justify-content: space-between; align-items: center; background-color: #EEE;border-radius: .5rem .5rem 0 0;">
        <span>{{clock.clkName}}</span>
        <div style="display: inline-block;">
          <div style="display: inline-block; padding:0 .5rem;">
            <select v-model="clock.clkType" @change="checkSwipeNumEnable">
              <option v-for="c in clkTypes" :key="c" :value="c.val">{{c.title}}</option>
            </select>
          </div>
          <Button class="del-btn" @click="close">
            <svg t="1649845665115" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3595" width="20" height="20"><path d="M687.603949 656.994302 541.10027 510.457878 687.603949 363.943966c8.829086-8.840342 8.829086-23.122627 0-31.961946-8.850575-8.840342-23.13286-8.840342-31.962969 0L509.138324 478.495932 362.623389 331.980997c-8.840342-8.818853-23.122627-8.818853-31.962969 0-8.840342 8.840342-8.840342 23.144116 0 31.984459l146.493445 146.514935L330.638931 656.994302c-8.819876 8.830109-8.819876 23.133883 0 31.962969 8.840342 8.829086 23.144116 8.829086 31.984459 0l146.514935-146.514935 146.502655 146.514935c8.830109 8.829086 23.112394 8.829086 31.962969 0C696.433034 680.129208 696.45657 665.824411 687.603949 656.994302z" p-id="3596" fill="#d81e06"></path><path d="M938.362063 510.457878c0-237.061161-192.174857-429.234995-429.247274-429.234995-237.062184 0-429.246251 192.173834-429.246251 429.234995 0 237.083673 192.185091 429.257507 429.246251 429.257507 97.345072 0 186.435133-33.110095 258.440074-87.677898 2.958378-3.354398 4.900613-7.636934 4.900613-12.449543 0-10.506285-8.521071-19.026332-19.027355-19.026332-5.431709 0-10.287297 2.162246-13.752212 5.826705l-0.2415 0c-64.456011 47.414893-143.745868 75.800383-229.876528 75.800383-214.679407 0-388.730489-174.073594-388.730489-388.719232 0-214.688617 174.051081-388.718209 388.730489-388.718209 214.688617 0 388.697743 174.029592 388.697743 388.718209 0 65.548902-15.386432 127.277802-44.081984 181.490517l0 0.309038c-0.508583 1.811252-1.104147 3.576455-1.104147 5.519714 0 10.507308 8.520047 19.028379 19.028379 19.028379 8.18952 0 15.054881-5.254677 17.703197-12.494569l0 0.132006C920.349827 648.38625 938.362063 581.536726 938.362063 510.457878z" p-id="3597" fill="#d81e06"></path></svg>
          </Button>
        </div>
      </div>
      <div style="overflow: auto;">
        <div class="time-content">
          <span class="title">音量</span>
          <div class="year-content">
            <SwipeNum v-bind:style="{border:false?'none':'1px solid #E0E0E0'}" ref="volumeInput" prefix-fixed="1" after-fixed="0" height="2rem" width="2rem"  :num-val="clock.clkVolume" type="string" @update="v=>updateVolume(v)"></SwipeNum>
            <span style="font-size: 0.5rem; color:#ffb9b9; display: inline-block; padding: 0 0 0 .5rem;">0表示使用系统音量</span>
          </div>
        </div>
        <div class="time-content" v-show="clock.clkType <= 2">
          <span class="title">年</span>
          <div class="switch-content" v-show="clock.clkType === 2">
            <switch-btn ref="yearSwitchBtn" @on-switch="v=>doYearSwitch(clock,v)"/>
          </div>
          <div class="year-content">
            <span class="disabled-num">2</span>
            <span class="disabled-num">0</span>
            <SwipeNum v-bind:style="{border:false?'none':'1px solid #E0E0E0'}" ref="yearInput" prefix-fixed="2" after-fixed="0" height="2rem" width="2rem"  :num-val="clock.clkYear" type="string" @update="v=>updateYear(v)"></SwipeNum>
          </div>
        </div>
        <div class="time-content" v-show="clock.clkType <= 2 || clock.clkType == 7">
          <span class="title">月</span>
          <div class="switch-content" v-show="clock.clkType === 2">
            <switch-btn ref="monthSwitchBtn" @on-switch="v=>doMonthSwitch(clock,v)"/>
          </div>
          <div class="other-content">
            <SwipeNum v-bind:style="{border:false?'none':'1px solid #E0E0E0'}" ref="monthInput" prefix-fixed="2" after-fixed="0" height="2rem" width="2rem"  :num-val="clock.clkMonth" type="string" @update="v=>updateMonth(v)"></SwipeNum>
          </div>
        </div>
        <div class="time-content" v-show="clock.clkType === 2">
          <span class="title">周</span>
          <div class="switch-content" v-show="clock.clkType === 2">
            <switch-btn ref="weekSwitchBtn" @on-switch="v=>doWeekSwitch(clock, v)"/>
          </div>
          <div class="other-content">
            <SwipeNum v-bind:style="{border:false?'none':'1px solid #E0E0E0'}" ref="weekInput" prefix-fixed="1" after-fixed="0" height="2rem" width="2rem"  :num-val="clock.clkWeek" type="string" @update="v=>updateWeek(v)"></SwipeNum>
          </div>
        </div>

        <div class="time-content" v-show="clock.clkType <= 2 || clock.clkType >= 5">
          <span class="title" v-if="clock.clkType != 5 && clock.clkType != 6">日</span>
          <span class="title" v-if="clock.clkType == 5 || clock.clkType == 6">前</span>
          <div class="switch-content" v-show="clock.clkType === 2">
            <switch-btn ref="daySwitchBtn" @on-switch="v=>doDaySwitch(clock, v)"/>
          </div>
          <div class="other-content">
            <SwipeNum v-bind:style="{border:false?'none':'1px solid #E0E0E0'}" ref="dayInput" prefix-fixed="2" after-fixed="0" height="2rem" width="2rem"  :num-val="clock.clkDay" type="string" @update="v=>updateDay(v)"></SwipeNum>
          </div>
          <span class="title" v-if="clock.clkType == 5 || clock.clkType == 6">天</span>
        </div>
        <div class="time-content">
          <span class="title">时</span>
          <div class="switch-content" v-show="clock.clkType === 2">
            <switch-btn ref="hourSwitchBtn" @on-switch="v=>doHourSwitch(clock, v)"/>
          </div>
          <div class="other-content">
            <SwipeNum v-bind:style="{border:false?'none':'1px solid #E0E0E0'}" ref="hourInput" prefix-fixed="2" after-fixed="0" height="2rem" width="2rem"  :num-val="clock.clkHour" type="string" @update="v=>updateHour(v)"></SwipeNum>
          </div>
        </div>
        <div class="time-content">
          <span class="title">分</span>
          <div class="other-content">
            <SwipeNum v-bind:style="{border:false?'none':'1px solid #E0E0E0'}" ref="minuteInput" prefix-fixed="2" after-fixed="0" height="2rem" width="2rem"  :num-val="clock.clkMinute" type="string" @update="v=>updateMinute(v)"></SwipeNum>
          </div>
        </div>
        <div class="time-content" v-show="clock.clkType === 1">
          <span class="title">间隔</span>
          <div class="other-content">
            <SwipeNum v-bind:style="{border:false?'none':'1px solid #E0E0E0'}" ref="betweenInput" prefix-fixed="4" after-fixed="0" height="2rem" width="2rem"  :num-val="clock.clkBetween" type="string" @update="v=>updateBetween(v)"></SwipeNum>
          </div>
          <span class="title">分</span>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="css" scoped>
.box {
  position: fixed;
  left:0;
  right:0;
  bottom:0;
  top:0;
  background-color: rgba(255,255,255,.5);
}
.content {
  position: fixed;
  left:1rem;
  right:1rem;
  bottom:4rem;
  top:3rem;

  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  background-color: #FFF;
  border-radius: .5rem;
  box-shadow: 0 0 1rem #AAA;
}
.del-btn {
  width: 21px;
  height:21px;
  border-radius: 21px;
  padding:0;
  border:none;
}
.time-content {
  display: flex;
  align-items: center;
  padding: .5rem 0;
}
.time-content .title {
  display: inline-block;
  padding:0 .5rem;
  color: #888;
}
.time-content .switch-content{
  display: inline-block;
  padding: 0 .5rem;
}
.time-content .other-content{
  display: inline-block;
  padding: 0 .5rem;
}
.time-content .year-content{
  display: flex;
  padding: 0 .5rem;
  align-items: center;
}
.time-content .year-content .disabled-num {
  padding: 0 .5rem;
}
</style>
<script>
import request from "@/requestutil"
import SwipeNum from "@/views/tools/Swipe_Num";
import SwitchBtn from "@/views/tools/SwitchBtn";
export default {
  name : "CreaterOrUpdater",
  components: {
    SwipeNum,
    SwitchBtn
  },
  props:['clockData'],
  data() {
    return {
      //0 - 初始化
      // > 0 关闭时修改了什么
      // -1 关闭时什么都没做
      id: 0,
      clkTypes:[
        {val: 0, title: '不重复'},
        {val: 1, title: '间隔时间'},
        {val: 2, title: '自定义'},
        {val: 3, title: '法定节假日'},
        {val: 4, title: '法定工作日'},
        {val: 5, title: '母亲节'},
        {val: 6, title: '父亲节'},
        {val: 7, title: '农历生日'},
      ],
      clock: {},
    }
  },
  watch: {
    //id = -1时，表示关闭窗口
    id(newVal){
      this.$emit('update',newVal)
    }
  },
  mounted() {
    this.id = 0
    var copied = this.clock
    for (var k in this.clockData) {
      copied[k] = this.clockData[k]
    }
    if (copied.clkType <= 1) {
      let now = new Date()
      copied.clkYear = copied.clkYear || now.getFullYear()
      copied.clkMonth = copied.clkMonth || now.getMonth() + 1
      copied.clkDay = copied.clkDay || now.getDate()
      copied.clkHour = copied.clkHour === undefined ? now.getHours() : copied.clkHour
      copied.clkMinute = copied.clkMinute === undefined ? now.getMinutes() : copied.clkMinute
    }
    if (copied.clkYear) {
      copied.clkYear = parseInt(copied.clkYear) % 2000
    }
    if (copied.clkType <= 2) {
      this.$refs.yearInput.setNum(copied.clkYear,true)
      this.$refs.monthInput.setNum(copied.clkMonth,true)
      this.$refs.dayInput.setNum(copied.clkDay,true)
      if (copied.clkType == 2) {
        this.$refs.weekInput.setNum(copied.clkWeek,true)
      }
    } else if (copied.clkType == 5 || copied.clkType == 6) {
      copied.clkDay = copied.beforeDay
      this.$refs.dayInput.setNum(copied.clkDay,true)
    } else if (copied.clkType == 7) {
      copied.clkMonth = copied.lunarMonth
      copied.clkDay = copied.lunarDay
      this.$refs.monthInput.setNum(copied.lunarMonth,true)
      this.$refs.dayInput.setNum(copied.lunarDay,true)
    }
    this.$refs.hourInput.setNum(copied.clkHour,true)
    this.$refs.minuteInput.setNum(copied.clkMinute,true)
    if (copied.clkType == 1) {
      this.$refs.betweenInput.setNum(copied.clkBetween,true)
    }
    if (copied.clkType == 2) {
      if (copied.clkYear) {
        this.$refs.yearSwitchBtn.switchState(1,true)
      } else {
        this.$refs.yearInput.setEnabled(false)
      }
      if (copied.clkMonth) {
        this.$refs.monthSwitchBtn.switchState(1,true)
      } else {
        this.$refs.monthInput.setEnabled(false)
      }
      this.$refs.dayInput.setEnabled(false)
      this.$refs.weekInput.setEnabled(false)
      if (copied.clkWeek) {
        this.$refs.weekSwitchBtn.switchState(1,true)
        this.$refs.weekInput.setEnabled(true)
      } else if (copied.clkDay) {
        this.$refs.daySwitchBtn.switchState(1,true)
        this.$refs.dayInput.setEnabled(true)
      }
      if (copied.clkHour != null) {
        this.$refs.hourSwitchBtn.switchState(1,true)
      } else {
        this.$refs.hourInput.setEnabled(false)
      }
    }
    this.$refs.volumeInput.setNum(copied.clkVolume, true)
  },
  methods:{
    close() {
      this.id = -1
    },
    checkSwipeNumEnable(event) {
      let op = event.target.value
      if (op == 0 || op == 1) {
        this.$refs.yearInput.setEnabled(true)
        this.$refs.yearInput.setNum(this.clock.clkYear,true)
        this.$refs.monthInput.setEnabled(true)
        this.$refs.monthInput.setNum(this.clock.clkMonth,true)
        this.$refs.dayInput.setEnabled(true)
        this.$refs.dayInput.setNum(this.clock.clkDay,true)
        this.$refs.hourInput.setEnabled(true)
        this.$refs.hourInput.setNum(this.clock.clkHour,true)
      } else if (op == 2){
        if (this.clock.clkYear && this.clock.clkYear > 0) {
          this.$refs.yearSwitchBtn.switchState(1,true)
          this.$refs.yearInput.setEnabled(true)
          this.$refs.yearInput.setNum(this.clock.clkYear,true)
        } else {
          this.$refs.yearSwitchBtn.switchState(2,true)
          this.$refs.yearInput.setEnabled(false)
          this.$refs.yearInput.setNum(0,true)
        }

        if (this.clock.clkMonth && this.clock.clkMonth > 0) {
          this.$refs.monthSwitchBtn.switchState(1,true)
          this.$refs.monthInput.setEnabled(true)
          this.$refs.monthInput.setNum(this.clock.clkMonth,true)
        } else {
          this.$refs.yearSwitchBtn.switchState(2,true)
          this.$refs.monthInput.setEnabled(false)
          this.$refs.monthInput.setNum(0,true)
        }

        if (this.clock.clkDay && this.clock.clkDay > 0) {
          this.$refs.daySwitchBtn.switchState(1,true)
          this.$refs.dayInput.setEnabled(true)
          this.$refs.dayInput.setNum(this.clock.clkDay,true)
        } else {
          this.$refs.daySwitchBtn.switchState(2,true)
          this.$refs.dayInput.setEnabled(false)
          this.$refs.dayInput.setNum(0,true)
        }

        if (this.clock.clkWeek && this.clock.clkWeek > 0) {
          this.$refs.weekSwitchBtn.switchState(1,true)
          this.$refs.weekInput.setEnabled(true)
          this.$refs.weekInput.setNum(this.clock.clkWeek,true)
        } else {
          this.$refs.weekSwitchBtn.switchState(2,true)
          this.$refs.weekInput.setEnabled(false)
          this.$refs.weekInput.setNum(0,true)
        }

        if (this.clock.clkHour != null) {
          this.$refs.hourSwitchBtn.switchState(1,true)
          this.$refs.hourInput.setEnabled(true)
          this.$refs.hourInput.setNum(this.clock.clkHour,true)
        } else {
          this.$refs.hourSwitchBtn.switchState(2,true)
          this.$refs.hourInput.setEnabled(false)
          this.$refs.hourInput.setNum(0,true)
        }
      } else if (op == 7) {
        this.$refs.monthInput.setEnabled(true)
        this.$refs.monthInput.setNum(this.clock.clkMonth,true)
        this.$refs.dayInput.setEnabled(true)
        this.$refs.dayInput.setNum(this.clock.clkDay,true)
      } else {
        this.$refs.hourInput.setEnabled(true)
        this.$refs.minuteInput.setEnabled(true)
      }
      let param = {}
      for (let k in this.clock) {
        param[k] = this.clock[k]
      }
      if (op >= 2 && !param.clkMinute) {
        param.clkMinute = 0
      }
      if (op > 2 && !param.clkHour) {
        param.clkHour = 0
      }
      param.clkType = op
      doUpdateSetting(convertData({}, param), data=>{
        if (data.code == 1) {
          window.openMsg('状态已切换',true)
        } else {
          window.openMsg('状态切换失败：'+data.msg)
        }
      })
    },
    updateVolume(val) {
      request.post('/api/clock/volumeSet', {id: this.clock.id, clkVolume: val})
      .then(r=>{
        if (r.data.code == 1) {
          window.openMsg('设置音量成功',true)
        } else {
          window.openMsg('设置音量失败：'+r.data.msg)
        }
      })
    },
    updateYear(year) {
      year = parseInt(year)
      this.clock.clkYear = year
      doUpdateSetting(convertData({clkYear: year}, this.clock), data=>{
        if (data.code == 1) {
          window.openMsg('年修改成功',true)
        } else {
          window.openMsg('年修改失败：'+data.msg)
        }
      })
    },
    updateMonth(month) {
      month = parseInt(month)
      this.clock.clkMonth = month
      doUpdateSetting(convertData({clkMonth: month}, this.clock), data=>{
        if (data.code == 1) {
          window.openMsg('月修改成功',true)
        } else {
          window.openMsg('月修改失败：'+data.msg)
        }
      })
    },
    updateDay(day) {
      day = parseInt(day)
      this.clock.clkDay = day
      doUpdateSetting(convertData({clkDay: day}, this.clock), data=>{
        if (data.code == 1) {
          window.openMsg('日修改成功',true)
        } else {
          window.openMsg('日修改失败：'+data.msg)
        }
      })
    },
    updateWeek(week) {
      week = parseInt(week)
      this.clock.clkWeek = week
      doUpdateSetting(convertData({clkWeek: week}, this.clock), data=>{
        if (data.code == 1) {
          window.openMsg('周修改成功',true)
        } else {
          window.openMsg('周修改失败：'+data.msg)
        }
      })
    },
    updateHour(hour) {
      hour = parseInt(hour)
      this.clock.clkHour = hour
      doUpdateSetting(convertData({ clkHour: hour}, this.clock), data=>{
        if (data.code == 1) {
          window.openMsg('小时修改成功',true)
        } else {
          window.openMsg('小时修改失败：'+data.msg)
        }
      })
    },
    updateMinute(minute) {
      minute = parseInt(minute)
      this.clock.clkMinute = minute
      doUpdateSetting(convertData({clkMinute: minute}, this.clock), data=>{
        if (data.code == 1) {
          window.openMsg('分钟修改成功',true)
        } else {
          window.openMsg('分钟修改失败：'+data.msg)
        }
      })
    },
    updateBetween(between) {
      between = parseInt(between)
      this.clock.clkBetween = between
      doUpdateSetting(convertData({ clkBetween: between}, this.clock), data=>{
        if (data.code == 1) {
          window.openMsg('间隔分钟修改成功',true)
        } else {
          window.openMsg('间隔分钟年修改失败：'+data.msg)
        }
      })
    },
    doYearSwitch(clock,state, disableEvent) {
      if (state == 2) {
        this.$refs.yearInput.setNum(0,disableEvent)
        doClearYearSetting(clock.id, data=>{
          if (data.code == 1) {
            delete this.clock.clkYear
            window.openMsg('禁用年成功',true)
          } else {
            window.openMsg('禁用年失败：'+data.msg)
          }
        });
      }
      this.$refs.yearInput.setEnabled(state == 1)
    },
    doMonthSwitch(clock,state,disableEvent) {
      if (state == 2) {
        this.$refs.monthInput.setNum(0,disableEvent)
        doClearMonthSetting(clock.id, data=>{
          if (data.code == 1) {
            delete this.clock.clkMonth
            window.openMsg('禁用月成功',true)
          } else {
            window.openMsg('禁用月失败：'+data.msg)
          }
        });
      }
      this.$refs.monthInput.setEnabled(state == 1)
    },
    doWeekSwitch(clock,state,disableEvent) {
      if (state == 1) {
        this.$refs.daySwitchBtn.switchState(2,disableEvent)
      } else {
        this.$refs.weekInput.setNum(0,disableEvent)
        doClearWeekSetting(clock.id, data=>{
          if (data.code == 1) {
            delete this.clock.clkWeek
            window.openMsg('禁用周成功',true)
          } else {
            window.openMsg('禁用周失败：'+data.msg)
          }
        });
      }
      this.$refs.weekInput.setEnabled(state == 1)
    },
    doDaySwitch(clock, state,disableEvent) {
      if (state == 1) {
        this.$refs.weekSwitchBtn.switchState(2,disableEvent)
      } else {
        this.$refs.dayInput.setNum(0,disableEvent)
        doClearDaySetting(clock.id, data=>{
          if (data.code == 1) {
            delete this.clock.clkDay
            window.openMsg('禁用日成功',true)
          } else {
            window.openMsg('禁用日失败：'+data.msg)
          }
        });
      }
      this.$refs.dayInput.setEnabled(state == 1)
    },
    doHourSwitch(clock,state,disableEvent) {
      if (state == 2) {
        this.$refs.hourInput.setNum(0,disableEvent)
        doClearHourSetting(clock.id, data=>{
          if (data.code == 1) {
            delete this.clock.clkHour
            window.openMsg('禁用小时成功',true)
          } else {
            window.openMsg('禁用小时失败：'+data.msg)
          }
        });
      } else {
        this.updateHour(this.clock.clkHour || 0)
      }
      this.$refs.hourInput.setEnabled(state == 1)
    }
  }
}

function convertData(param, clock) {
  if (clock.clkType == 0 || clock.clkType == 1 || clock.clkType == 7) {
    for (var k in clock) {
      if (k === 'clkYear'
        || k === 'clkMonth'
          || k === 'clkDay'
          || k === 'clkHour'
          || k === 'clkBetween'
      ) {
        if (k === 'clkYear' && clock.clkType == 7) continue
        if (param[k] == null) {
          param[k] = clock[k]
        }
      }
    }
  } else if (clock.clkType >= 3 && clock.clkType <= 6) {
    if (!param.clkHour) {
      param.clkHour = clock.clkHour
    }
  }
  if (param.clkYear != null) {
    param.clkYear += 2000
  }
  param.clkType = clock.clkType
  param.id = clock.id
  if (param.clkMinute == null) {
    param.clkMinute = clock.clkMinute
  }
  return param
}

function doUpdateSetting(param, callback) {
  if (param.clkType == null) {
    return
  }
  if (param.clkType == 0 || param.clkType == 1) {
    param.clkMinute = param.clkMinute || 0
    param.clkHour = param.clkHour || 0
  }
  request.post('/api/clock/createOrUpdate', param)
      .then(r=>{
        if (callback) callback(r.data)
      })
}

function doClearYearSetting(id, callback) {
  request.post('/api/clock/clearYear', {id: id})
      .then(r=>{
        if (callback) callback(r.data)
      })
}

function doClearMonthSetting(id, callback) {
  request.post('/api/clock/clearMonth', {id: id})
      .then(r=>{
        if (callback) callback(r.data)
      })
}

function doClearWeekSetting(id, callback) {
  request.post('/api/clock/clearWeek', {id: id})
      .then(r=>{
        if (callback) callback(r.data)
      })
}

function doClearDaySetting(id, callback) {
  request.post('/api/clock/clearDay', {id: id})
      .then(r=>{
        if (callback) callback(r.data)
      })
}

function doClearHourSetting(id, callback) {
  request.post('/api/clock/clearHour', {id: id})
      .then(r=>{
        if (callback) callback(r.data)
      })
}
</script>